<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件园商城 - 注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
            --warning-color: #f72585;
            --border-radius: 6px;
            --box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e6f0ff 100%);
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 15px;
        }

        .auth-container {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 100%;
            max-width: 350px;
            padding: 20px;
            position: relative;
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .auth-container:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .auth-header {
            text-align: center;
            margin-bottom: 15px;
        }

        .auth-header h1 {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 1.5rem;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }

        .auth-header p {
            color: #6c757d;
            font-size: 0.8rem;
            margin: 0;
        }

        .form-control {
            border-radius: var(--border-radius);
            padding: 8px 12px 8px 35px;
            border: 1px solid #e2e8f0;
            transition: var(--transition);
            font-size: 0.85rem;
            height: 38px;
        }

        .form-control:focus {
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            border-color: var(--primary-color);
        }

        .form-label {
            font-weight: 500;
            color: var(--dark-color);
            margin-bottom: 4px;
            font-size: 0.8rem;
            display: block;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            border-radius: var(--border-radius);
            padding: 8px;
            font-weight: 500;
            width: 100%;
            transition: var(--transition);
            border: none;
            font-size: 0.85rem;
            margin-top: 6px;
            height: 38px;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
        }

        .gender-options {
            display: flex;
            gap: 8px;
            margin-top: 5px;
        }

        .gender-option {
            flex: 1;
            text-align: center;
            padding: 6px;
            border: 1.5px solid #e2e8f0;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        .gender-option:hover {
            border-color: var(--primary-color);
        }

        .gender-option.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .password-strength {
            height: 3px;
            margin-top: 4px;
            border-radius: 2px;
            background-color: #e2e8f0;
            overflow: hidden;
        }

        .password-strength-meter {
            height: 100%;
            width: 0%;
            transition: var(--transition);
        }

        .password-strength-text {
            font-size: 0.7rem;
            margin-top: 2px;
            text-align: right;
            color: #6c757d;
        }

        .auth-footer {
            text-align: center;
            margin-top: 10px;
            font-size: 0.75rem;
            color: #6c757d;
        }

        .auth-footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }

        .auth-footer a:hover {
            text-decoration: underline;
            color: var(--secondary-color);
        }

        .invalid-feedback {
            display: block;
            color: var(--warning-color);
            font-size: 0.7rem;
            margin-top: 2px;
        }

        .form-text {
            font-size: 0.7rem;
            color: #6c757d;
            margin-top: 2px;
        }

        .form-group {
            margin-bottom: 12px;
        }

        .form-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #adb5bd;
            font-size: 0.9rem;
        }

        .input-group {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #adb5bd;
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
            background: none;
            border: none;
            padding: 0;
        }

        .password-toggle:hover {
            color: var(--primary-color);
        }

        /* 头像上传区域 */
        .avatar-upload {
            margin-bottom: 12px;
            text-align: center;
        }

        .avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 8px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            cursor: pointer;
            border: 2px dashed #adb5bd;
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-preview i {
            color: #adb5bd;
            font-size: 1.5rem;
        }

        .avatar-input {
            display: none;
        }

        .avatar-text {
            font-size: 0.7rem;
            color: #6c757d;
        }

        /* 成功提示 */
        .alert-success {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            padding: 10px 16px;
            border-radius: var(--border-radius);
            background-color: #4cc9f0;
            color: white;
            box-shadow: var(--box-shadow);
            display: flex;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .alert-success.show {
            opacity: 1;
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .auth-container {
                padding: 15px 12px;
            }

            .auth-header h1 {
                font-size: 1.4rem;
            }

            .gender-options {
                gap: 6px;
            }
        }
    </style>
</head>
<body>
<!-- 成功提示框 -->
<div id="successAlert" class="alert-success" style="display: none;">
    <i class="bi bi-check-circle-fill"></i>
    <span>注册成功！即将跳转到首页...</span>
</div>

<div class="auth-container">
    <div class="auth-header">
        <h1>创建账号</h1>
        <p>加入软件园商城，享受便捷购物体验</p>
    </div>

    <form id="registerForm" th:action="@{/register}" method="post" enctype="multipart/form-data" novalidate>
        <!-- 头像上传区域 -->
        <div class="avatar-upload">
            <div class="avatar-preview" id="avatarPreview">
                <i class="bi bi-person-circle"></i>
            </div>
            <input type="file" id="avatar" name="avatar" class="avatar-input" accept="image/*">
            <p class="avatar-text">点击上传头像</p>
        </div>

        <div class="form-group">
            <label for="name" class="form-label">姓名</label>
            <div th:if="${msg}" class="alert alert-danger" role="alert" th:text="${msg}" style="padding: 6px 10px; font-size: 0.75rem;"></div>
            <div class="input-group">
                <span class="form-icon"><i class="bi bi-person"></i></span>
                <input type="text" class="form-control" id="name" name="name" placeholder="请输入您的真实姓名" required>
            </div>
            <div class="invalid-feedback">请输入您的姓名</div>
        </div>

        <div class="form-group">
            <label class="form-label">性别</label>
            <div class="gender-options">
                <div class="gender-option active" data-gender="男">
                    <i class="bi bi-gender-male me-1"></i>男
                </div>
                <div class="gender-option" data-gender="女">
                    <i class="bi bi-gender-female me-1"></i>女
                </div>
                <div class="gender-option" data-gender="其他">
                    <i class="bi bi-people me-1"></i>其他
                </div>
            </div>
            <input type="hidden" id="sex" name="sex" value="男">
        </div>

        <div class="form-group">
            <label for="age" class="form-label">年龄</label>
            <div class="input-group">
                <span class="form-icon"><i class="bi bi-calendar3"></i></span>
                <input type="number" class="form-control" id="age" name="age" placeholder="请输入您的年龄" min="1" max="120" required>
            </div>
            <div class="invalid-feedback">请输入有效的年龄（1-120岁）</div>
        </div>

        <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="input-group">
                <span class="form-icon"><i class="bi bi-lock"></i></span>
                <input type="password" class="form-control" id="password" name="password" placeholder="请设置6位以上密码" required>
                <button type="button" class="password-toggle" id="togglePassword"><i class="bi bi-eye"></i></button>
            </div>
            <div class="password-strength">
                <div class="password-strength-meter" id="passwordStrengthMeter"></div>
            </div>
            <div class="password-strength-text" id="passwordStrengthText">密码强度: 弱</div>
            <div class="invalid-feedback">密码长度至少3位</div>
        </div>

        <div class="form-group">
            <label for="confirmPassword" class="form-label">确认密码</label>
            <div class="input-group">
                <span class="form-icon"><i class="bi bi-lock"></i></span>
                <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" required>
                <button type="button" class="password-toggle" id="toggleConfirmPassword"><i class="bi bi-eye"></i></button>
            </div>
            <div class="invalid-feedback">两次输入的密码不一致</div>
        </div>

        <button type="submit" class="btn btn-primary">注册</button>

        <div class="auth-footer">
            <p>已有账号？<a href="#" th:href="@{/toLogin}">立即登录</a></p>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 性别选择
    document.querySelectorAll('.gender-option').forEach(option => {
        option.addEventListener('click', function() {
            document.querySelectorAll('.gender-option').forEach(opt => opt.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('sex').value = this.dataset.gender;
        });
    });

    // 密码可见性切换
    const togglePassword = document.getElementById('togglePassword');
    const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');

    togglePassword.addEventListener('click', function() {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
    });

    toggleConfirmPassword.addEventListener('click', function() {
        const type = confirmPassword.getAttribute('type') === 'password' ? 'text' : 'password';
        confirmPassword.setAttribute('type', type);
        this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
    });

    // 密码强度检测
    const strengthMeter = document.getElementById('passwordStrengthMeter');
    const strengthText = document.getElementById('passwordStrengthText');

    password.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;

        if (password.length > 0) {
            // 长度
            if (password.length >= 3) strength += 20;
            if (password.length >= 10) strength += 10;

            // 包含数字
            if (/\d/.test(password)) strength += 20;

            // 包含小写字母
            if (/[a-z]/.test(password)) strength += 20;

            // 包含大写字母
            if (/[A-Z]/.test(password)) strength += 15;

            // 包含特殊字符
            if (/[^a-zA-Z0-9]/.test(password)) strength += 15;
        }

        strengthMeter.style.width = strength + '%';

        if (strength < 30) {
            strengthMeter.style.backgroundColor = '#f72585';
            strengthText.textContent = '密码强度: 弱';
        } else if (strength < 60) {
            strengthMeter.style.backgroundColor = '#f9c74f';
            strengthText.textContent = '密码强度: 一般';
        } else if (strength < 80) {
            strengthMeter.style.backgroundColor = '#90be6d';
            strengthText.textContent = '密码强度: 良好';
        } else {
            strengthMeter.style.backgroundColor = '#4cc9f0';
            strengthText.textContent = '密码强度: 强';
        }
    });

    // 表单验证
    const form = document.getElementById('registerForm');
    const nameInput = document.getElementById('name');
    const ageInput = document.getElementById('age');
    const successAlert = document.getElementById('successAlert');

    // 检查是否有注册成功的消息
    const successMsg = "[[${msg}]]";
    if (successMsg && successMsg.includes("成功")) {
        showSuccessAlert();
    }

    function showSuccessAlert() {
        successAlert.style.display = 'flex';
        setTimeout(() => {
            successAlert.classList.add('show');
        }, 10);

        setTimeout(() => {
            successAlert.classList.remove('show');
            setTimeout(() => {
                successAlert.style.display = 'none';
            }, 300);
        }, 3000);
    }

    // 实时验证
    nameInput.addEventListener('input', validateName);
    ageInput.addEventListener('input', validateAge);
    password.addEventListener('input', validatePassword);
    confirmPassword.addEventListener('input', validateConfirmPassword);

    function validateName() {
        if (nameInput.value.trim() === '') {
            nameInput.classList.add('is-invalid');
            return false;
        } else {
            nameInput.classList.remove('is-invalid');
            return true;
        }
    }

    function validateAge() {
        const age = parseInt(ageInput.value);
        if (isNaN(age)) {
            ageInput.classList.remove('is-invalid');
            return true;
        }
        if (age < 1 || age > 120) {
            ageInput.classList.add('is-invalid');
            return false;
        } else {
            ageInput.classList.remove('is-invalid');
            return true;
        }
    }

    function validatePassword() {
        if (password.value.length < 3) {
            password.classList.add('is-invalid');
            return false;
        } else {
            password.classList.remove('is-invalid');
            return true;
        }
    }

    function validateConfirmPassword() {
        if (confirmPassword.value !== password.value) {
            confirmPassword.classList.add('is-invalid');
            return false;
        } else {
            confirmPassword.classList.remove('is-invalid');
            return true;
        }
    }

    form.addEventListener('submit', function(event) {
        const isNameValid = validateName();
        const isAgeValid = validateAge();
        const isPasswordValid = validatePassword();
        const isConfirmPasswordValid = validateConfirmPassword();

        if (!isNameValid || !isAgeValid || !isPasswordValid || !isConfirmPasswordValid) {
            event.preventDefault();
        }
    });

    // 头像上传预览
    const avatarInput = document.getElementById('avatar');
    const avatarPreview = document.getElementById('avatarPreview');

    avatarPreview.addEventListener('click', function() {
        avatarInput.click();
    });

    avatarInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                if (avatarPreview.querySelector('img')) {
                    avatarPreview.querySelector('img').src = e.target.result;
                } else {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    avatarPreview.innerHTML = '';
                    avatarPreview.appendChild(img);
                }
            };
            reader.readAsDataURL(file);
        }
    });
</script>
</body>
</html>